<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'

const props = defineProps({
  pageCount: {
    type: Number,
    default: 0
  },
  currentPage: {
    type: Number,
    default: 0
  }
})

const emits = defineEmits<{
  (e: 'update:currentPage', v: number): void
}>()

const curIdx = ref(0)
const hasPrevEllipsis = ref(false)
const hasNextEllipsis = ref(false)
const midPageList = reactive<number[]>([])

// interface PageInfo {
//   curIdx: number
//   hasPrevEllipsis: boolean
//   hasNextEllipsis: boolean
//   midPageList: number[]
// }
// const pageInfo = reactive<PageInfo>({
//   curIdx: 0,
//   hasPrevEllipsis: false,
//   hasNextEllipsis: false,
//   midPageList: []
// })

function updatePageInfo(p: number, pageCount: number) {
  if (pageCount == 0) {
    curIdx.value = 0
    hasPrevEllipsis.value = false
    hasNextEllipsis.value = false
    midPageList.splice(0, midPageList.length)
    return
  }
  if (p < 0 || p >= pageCount) {
    return
  }
  curIdx.value = p
  if (curIdx.value >= pageCount) {
    curIdx.value = pageCount - 1
  }
  if (curIdx.value < 0) {
    curIdx.value = 0
  }
  let start = Math.max(curIdx.value - 1, 1)
  const end = Math.min(start + 2, pageCount - 2)
  start = Math.min(start, end - 2)
  start = Math.max(start, 1)
  midPageList.splice(0, midPageList.length)
  for (let i = start; i <= end; i++) {
    midPageList.push(i)
  }
  hasPrevEllipsis.value = false
  const size = midPageList.length
  if (size > 0 && midPageList[0] > 1) {
    hasPrevEllipsis.value = true
  }
  hasNextEllipsis.value = size > 0 && midPageList[size - 1] < pageCount - 2
}

onMounted(() => {
  updatePageInfo(props.currentPage, props.pageCount)
})

watch(
  () => props.pageCount,
  (v) => {
    updatePageInfo(curIdx.value, v)
  }
)
watch(
  () => props.currentPage,
  (i) => {
    if (i === curIdx.value) {
      return
    }
    updatePageInfo(i, props.pageCount)
  }
)

function setCurrentPage(v: number) {
  const v0 = curIdx.value
  if (v === curIdx.value) {
    return
  }
  updatePageInfo(v, props.pageCount)
  if (v0 !== curIdx.value) {
    emits('update:currentPage', curIdx.value)
  }
}
</script>
<template>
  <div class="pagination is-centered">
    <!-- <a class="pagination-previous" @click="setCurrentPage(curIdx - 1)"> &lt; </a>
    <a class="pagination-next" @click="setCurrentPage(curIdx + 1)"> &gt; </a> -->
    <ul v-if="pageCount > 1" class="pagination-list">
      <li>
        <a
          class="pagination-link"
          :class="{ 'is-current': curIdx === 0 }"
          @click="setCurrentPage(0)"
          >1
        </a>
      </li>
      <li><span v-if="hasPrevEllipsis" class="pagination-ellipsis">&hellip;</span></li>
      <li v-for="page in midPageList" :key="page">
        <a
          class="pagination-link"
          :class="{ 'is-current': curIdx === page }"
          @click="setCurrentPage(page)"
        >
          {{ page + 1 }}
        </a>
      </li>
      <li><span v-if="hasNextEllipsis" class="pagination-ellipsis">&hellip;</span></li>
      <li v-if="pageCount > 1">
        <a
          class="pagination-link"
          :class="{ 'is-current': curIdx === pageCount - 1 }"
          @click="setCurrentPage(pageCount - 1)"
        >
          {{ pageCount }}
        </a>
      </li>
    </ul>
  </div>
</template>
